<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="${ctxPath}/component/pear/css/pear.css"/>
    <style>
        .layui-tab-content{
            padding: 0;
        }
        .fontcolor {
            color: #049590 !important;
        }
        a:hover{
            color: #049590 !important;
        }
        .video-show{
            float: left;
            padding: 5px 0px;
            width: 60px;
            text-align: center;
        }
        .div-zy {
            background: url("../../resource/wzgl/zy1.png") no-repeat;
            background-size: 100% 100%;
            padding: 10px 5px 5px 5px;
            position: relative;
            margin-top: 10px;
            font-size: 13px;
            cursor: pointer;
        }
        .zy-select-this {
            background: url("../../resource/wzgl/zy2.png") no-repeat!important;
            background-size: 100% 100%!important;
        }
        .div-zy-li {
            padding: 5px 20px 0px 15px;
        }
        .title-zy {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            font-weight: bold;
            font-size: 16px;
            width: 335px;
        }
        .sxtsl1{
            font-size: 16px;
            padding-left: 5px;
            color: deepskyblue;
        }
        .sxtsl2{
            font-size: 16px;
            padding-left: 5px;
            color: #8a8a8a;
        }
        .layui-table-box button {
            font-size: 12.5px;
        }
        .content {
            line-height: 25px;
            min-width: 315px;
        }
        .content div{
            display: inline-block;
        }
        .content-title{
            display: inline-block;
            color: #049590 !important;
        }
        .content-time{
            color: #999 !important;
            padding-left: 35px;
        }
        .content-wg1{
            background: url("../../resource/wzgl/wg1.png") no-repeat;
            background-size: 100% 100%;
            width: 120px;
            position: relative;
            color: #fff!important;
            text-align: center;
        }
        .content-wg2{
            background: url("../../resource/wzgl/wg2.png") no-repeat;
            background-size: 100% 100%;
            width: 120px;
            position: absolute;
            color: #fff!important;
            text-align: center;
            right: 30px;
        }
        #page{
            position: absolute;
            width: 100%;
            bottom: 10px;
            height: 41px;
            font-size: 12px;
            white-space: nowrap;
            text-align: center;
        }

        .wg-title{
            float: left;
            padding-left: 10px;
        }
        .wg-count{
            float: right;
            padding-right: 10px;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space5">
    <div class="layui-col-sm5 layui-col-md4 layui-col-lg3">
        <div class="layui-card" id="card1">
            <div class="layui-card-body" style="padding: 0 5px;">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title" style="text-align: center">
                        <li class="layui-this">进行中作业</li>
                        <li>全部作业</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show" id="zy-jxz">

                        </div>
                        <div class="layui-tab-item" id="zy-qb"></div>
                    </div>
                </div>

            </div>
            <div id="page"></div>
        </div>
    </div>
    <div class="layui-col-sm7 layui-col-md8 layui-col-lg9">
        <div class="layui-card">
            <div class="layui-card-body">
                <div class="col-sm-12 search-collapse">
                    <form id="formId" class="layui-form">
                        <div class="layui-form-item">
                            <div class="layui-col-md4">
                                <label class="layui-form-label">作业名称</label>
                                <div class="layui-input-block">
                                    <select name="planid" id="operationPlanid" lay-verify="required" lay-search="">
                                        <option value=""></option>
                                        @for(item in OperationplanList!){
                                        <option value="${item.id}" title="${item.name}">${item.name}</option>
                                        @}
                                    </select>
                                    <!--<input type="text" placeholder="请选择" autocomplete="off" class="layui-input" id="demo">-->
                                </div>
                            </div>

                            <div class="layui-inline">
                                <label class="layui-form-label">日期范围</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="dateinfo" class="layui-input" id="date1" placeholder="请选择时间区间" autocomplete="off">
                                </div>
                            </div>
                            <button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="wzgl-query">
                                <i class="layui-icon layui-icon-search"></i>
                                查询
                            </button>
                            <button type="reset" class="pear-btn pear-btn-md">
                                <i class="layui-icon layui-icon-refresh"></i>
                                重置
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <div class="layui-card-body">
                <button class="pear-btn pear-btn-md btn-wzqr pear-btn-primary" id="cz0" lay-filter="state-query" lay-event="qb">
                    全部
                </button>
                <button class="pear-btn pear-btn-md btn-wzqr" id="cz1" lay-filter="state-query" lay-event="wqr">
                    未确认
                </button>
                <button class="pear-btn pear-btn-md btn-wzqr" id="cz2" lay-filter="state-query" lay-event="yqr">
                    已确认
                </button>
                <button class="pear-btn pear-btn-md btn-wzqr" id="cz3" lay-filter="state-query" lay-event="yxj">
                    已消警
                </button>
                <table id="wzgl-table" lay-filter="wzgl-table"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="wzgl-bar">
    <button
            class="pear-btn pear-btn-primary pear-btn-sm" lay-event="picture" title="图片"><i
            class="layui-inline layui-icon layui-icon-picture"></i>
    </button>
    <button
            class="pear-btn pear-btn-primary pear-btn-sm" lay-event="video" title="视频"><i
            class="layui-inline layui-icon layui-icon-video"></i>
    </button>
    <button class="pear-btn pear-btn-md pear-btn-primary sh" onclick="showSh(this)">
        <i class="layui-icon layui-icon-eye"></i>
        审核
    </button>
    <button class="pear-btn pear-btn-md pear-btn-primary sh" lay-event="batchRemove" title="删除">
        <i class="layui-icon layui-icon-delete"></i>
    </button>
</script>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['table', 'form', 'jquery', 'dictionary','element', 'laydate', 'laypage', 'common'], function () {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;
        let laydate = layui.laydate;
        let laypage = layui.laypage;
        let element = layui.element
        let SYS_PATH = "${ctxPath}/";
        let VIEW_PATH = "${ctxPath}/wzgl/view/";
        var map=new Map();

        var planid;

        laydate.render({
            elem: '#date1'
            ,type: 'datetime'
            ,range: true //或 range: '~' 来自定义分割字符
        })
        toPage(1,1,true);

        window.onresize=function (){
            $("#card1").css("height", $(".layui-table-view").height() + 160);
        }
        function toPage(page,status,flag){
            $.ajax({
                url: SYS_PATH+'busOperationplan/data/list?page='+page+'&limit=5&status='+status,
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    if (result.code == 0) {
                        var html='';
                        for (n in result.data){
                            var ppid=result.data[n].id;
                            var zt=result.data[n].status;
                            var jobcontent=result.data[n].jobContent.replace(/\s+/g, "").replace(/<\/?.+?>/g,"").replace(/[\r\n]/g, "").replace("\"", "").replace("\'", "");
                            if (jobcontent.length>20){
                                jobcontent=jobcontent.substring(0,20)+'...'
                            }
                            if (zt=='1'){
                                html += '<ul class="div-zy" plan-id="'+result.data[n].id+'">\n' +
                                    '                                <li>\n';
                                if (ppid!='-1'){
                                    html += '                                            <div class="title fontcolor" style="display: table"><div class="video-show" onclick="ssVideo(\''+jobcontent+'\',\''+result.data[n].id+'\')"><img src="../../resource/wzgl/sxt.png" width="18px" height="20px"><span class="sxtsl1">('+result.data[n].sxtsl+')</span></div>\n';
                                }else{
                                    //html = '                                    <div class="title fontcolor" style="display: table"><div class="video-show"><img src="../../resource/wzgl/sxt3.png" width="18px" height="20px"><span class=" sxtsl2">('+result.data[n].sxtsl+')</span></div>'+html;
                                    html +='                                    <div class="title fontcolor" style="display: table"><div class="video-show"><img src="../../resource/wzgl/sxt3.png" width="18px" height="20px"><span class=" sxtsl2">('+result.data[n].sxtsl+')</span></div>\n';
                                }
                                    html +='                                        <div style="display: table-cell;vertical-align: middle;width: 290px">\n' +
                                    '                                            <div class="title-zy" title="'+result.data[n].jobContent+'">'+jobcontent+'</div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div></div>\n' +
                                    '                                    <div class="div-zy-li">\n' +
                                    '                                        <div class="content">\n' +
                                    '                                            <div class="content-title">作业单位：</div>\n' +
                                    '                                            <div class="content-value">'+result.data[n].constructionManagementUnit+'</div>\n' +
                                    '                                        </div>\n' +
                                    '                                        <div class="content">\n' +
                                    '                                            <div class="content-title">作业风险等级：</div>\n' +
                                    '                                            <div class="content-value">'+result.data[n].zyfxdj+'</div>\n';
                                if (ppid!='-1'){
                                    html += '                                            <div class="content-time">'+layui.util.toDateString(result.data[n].startTime,'MM-dd HH:mm')+'至'+layui.util.toDateString(result.data[n].endTime,'MM-dd HH:mm')+'</div>\n';
                                }
                                html += '                                        </div>\n' +
                                    '                                        <div class="content">\n' +
                                    '                                            <div class="content-wg1"><div class="wg-title">违规</div><div class="wg-count">'+result.data[n].wgCount+'</div></div>\n' +
                                    '                                            <div class="content-wg2"><div class="wg-title">待确认违规</div><div class="wg-count">'+result.data[n].dqrwgCount+'</div></div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </li>\n' +
                                    '                            </ul>';
                            }else{
                                html += '<ul class="div-zy" plan-id="'+result.data[n].id+'">\n' +
                                    '                                <li>\n' +
                                    '                                    <div class="title fontcolor" style="display: table"><div class="video-show"><img src="../../resource/wzgl/sxt3.png" width="18px" height="20px"><span class="sxtsl2">('+result.data[n].sxtsl+')</span></div>\n' +
                                    '                                        <div style="display: table-cell;vertical-align: middle;width: 290px">\n' +
                                    '                                            <div class="title-zy" title="'+result.data[n].jobContent+'">'+jobcontent+'</div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div></div>\n' +
                                    '                                    <div class="div-zy-li">\n' +
                                    '                                        <div class="content">\n' +
                                    '                                            <div class="content-title">作业单位：</div>\n' +
                                    '                                            <div class="content-value">'+result.data[n].constructionManagementUnit+'</div>\n' +
                                    '                                        </div>\n' +
                                    '                                        <div class="content">\n' +
                                    '                                            <div class="content-title">作业风险等级：</div>\n' +
                                    '                                            <div class="content-value">'+result.data[n].zyfxdj+'</div>\n';
                                if (ppid!='-1'){
                                    html += '                                            <div class="content-time">'+layui.util.toDateString(result.data[n].startTime,'MM-dd HH:mm')+'至'+layui.util.toDateString(result.data[n].endTime,'MM-dd HH:mm')+'</div>\n';
                                }
                                html += '                                        </div>\n' +
                                    '                                        <div class="content">\n' +
                                    '                                            <div class="content-wg1"><div class="wg-title">违规</div><div class="wg-count">'+result.data[n].wgCount+'</div></div>\n' +
                                    '                                            <div class="content-wg2"><div class="wg-title">待确认违规</div><div class="wg-count">'+result.data[n].dqrwgCount+'</div></div>\n' +
                                    '                                        </div>\n' +
                                    '                                    </div>\n' +
                                    '                                </li>\n' +
                                    '                            </ul>';
                            }
                        }
                        if (status===1){
                            $("#zy-jxz").html(html);

                            if($("#zy-jxz").children().length>0){
                                $("#zy-jxz").children()[0].click(); // 加载完成选中第一个
                            }
                        } else{
                            $("#zy-qb").html(html);

                            if($("#zy-qb").children().length>0){
                                $("#zy-qb").children()[0].click(); // 加载完成选中第一个
                            }
                        }
                        if (flag){
                            if (result.data.length>0){
                                zdyPage(result.count,status);
                            } else{
                                zdyPage(3,status);
                            }
                        }
                        table.reload('wzgl-table', {where: {planid: planid},page: {curr: 1}});
                    } else {

                    }
                }
            })
        }

        function zdyPage(count, status){
            laypage.render({
                elem: 'page'
                , count: count
                , limit: 5
                , groups: 3
                , prev: '<'
                , next: '>'
                , first: false
                , last: false
                , layout: ['prev', 'page', 'next']
                , jump: function (obj, first) {
                    if (!first) {
                        toPage(obj.curr,status,false);
                    }
                }
            });
        }

        $(document).on('click','.div-zy',function () {
            $(".div-zy").removeClass("zy-select-this");
            $(this).addClass("zy-select-this");
            planid=$(this).attr("plan-id");
            $("#operationPlanid").val(planid);//设置选中的值
            layui.form.render("select");//layUI设置
            table.reload('wzgl-table', {where: {planid: planid},page: {curr: 1}})
        })

        element.on('tab(docDemoTabBrief)', function(data){
            if (data.index===0){
                toPage(1,1,true);
            }else{
                toPage(1,'',true);
            }
        });

        table.render({
            elem: '#wzgl-table',
            url: SYS_PATH + 'busOperationplan/data/wzList',
            page: true,
            cols: [
                [
                    {field: 'index', title: '序号',align: 'center',type: 'numbers'},
                    {field: 'eventName', title: '违规分类',align: 'center'},
                    {field: 'construction_name', title: '施工单位',align: 'center'},
                    {field: 'state', title: '状态',align: 'center'},
                    {field: 'createTime', title: '时间',align: 'center'},
                    {title: '操作', align: 'center', width: 250,templet: function (d){
                        return ' <button\n' +
                            '            class="pear-btn pear-btn-primary pear-btn-sm" onclick="showImg(\''+d.imagePath+'\',\''+d.eventName+'\')" title="图片"><i\n' +
                            '            class="layui-inline layui-icon layui-icon-picture"></i>\n' +
                            '    </button>\n' +
                            '    <button\n' +
                            '            class="pear-btn pear-btn-primary pear-btn-sm" onclick="showVideo(\''+d.videoPath+'\',\''+d.eventName+'\')" title="视频"><i\n' +
                            '            class="layui-inline layui-icon layui-icon-video"></i>\n' +
                            '    </button>\n' +
                            '    <button class="pear-btn pear-btn-md pear-btn-primary sh" onclick="showSh(this,'+d.id+',\''+d.imagePath+'\',\''+d.videoPath+'\',\''+d.eventName+'\',\''+d.state+'\',\''+d.createTime+'\')">\n' +
                            '        <i class="layui-icon layui-icon-eye"></i>\n' +
                            '        <span>审核</span>\n' +
                            '    </button>\n' +
                            '    <button class="pear-btn pear-btn-md pear-btn-danger" onclick="batchRemove(this,'+d.id+')">\n' +
                            '        <i class="layui-icon layui-icon-delete"></i>\n' +
                            '    </button>';
                    }}
                ]
            ],
            height: 'full-180',
            skin: 'line',
            defaultToolbar: '',
            toolbar: ''
        });
        $("#card1").css("height", $(".layui-table-view").height() + 160);

        $(document).on('click',".btn-wzqr",function(obj){
            $(".btn-wzqr").removeClass("pear-btn-primary");
            var event=$(this).attr("lay-event");
            if (event === 'wqr') {
                $("#cz1").addClass("pear-btn-primary");
                table.reload('wzgl-table', {where: {state: 0,planid: planid},page: {curr: 1}})
            } else if (event === 'yqr') {
                $("#cz2").addClass("pear-btn-primary");
                table.reload('wzgl-table', {where: {state: 1,planid: planid},page: {curr: 1}})
            } else if (event === 'yxj') {
                $("#cz3").addClass("pear-btn-primary");
                table.reload('wzgl-table', {where: {state: 2,planid: planid},page: {curr: 1}})
            }else{
                $("#cz0").addClass("pear-btn-primary");
                table.reload('wzgl-table', {where: {planid: planid},page: {curr: 1}})
            }
        });

        form.on('submit(wzgl-query)', function (data) {
            if(data.field.dateinfo){
                data.field["t.createTime_date_ge"] = data.field.dateinfo.substring(0, 19);
                data.field["t.createTime_date_le"] = data.field.dateinfo.substring(22, 41);
                data.field.dateinfo=undefined;
            }
            let pid = data.field.planid;
            table.reload('wzgl-table', {where: data.field,page: {curr: 1}});

            // 同步左侧状态
            $(".div-zy").removeClass("zy-select-this");
            $("ul[plan-id='"+pid+"']").addClass("zy-select-this");
            planid=pid;

            return false;
        });

        window.ssVideo=function (title,id) {
            layer.open({
                type: 2,
                title: '实时视频浏览 - '+title,
                skin: 'test-show',
                shade: 0.4,
                area: ['1400px', '705px'],
                content: VIEW_PATH + 'video?plan_id='+id
            });
        }

        window.showImg=function (imagePath,eventName) {
            var imgHtml = "<img src='"+imagePath+"' onerror=\"javascript:this.src='${ctxPath}/static/resource/images/pic404.png'\" width='100%' height='100%' style='object-fit:contain;'/>";
            layer.open({
                type: 1,
                shadeClose: true,
                scrollbar: false,
                maxmin: true,
                area: ['800px', '500px'],
                offset: 'auto',
                shade: 0.1,
                title: "图片预览 - "+eventName,
                content: imgHtml
            })
        }

        window.showVideo=function (videoPath,eventName) {
            var videoHtml = '<video height="500" controls autoplay autobuffer loop><source src="'+videoPath+'" type="video/mp4"></source></video>';
            layer.open({
                type: 1,
                title: "视频预览 - "+eventName,
                shade: 0.1,
                content: videoHtml
            })
        }

        window.showSh=function (obj,id,imagePath,videoPath,eventName,state,createTime) {
            map.set("shobj",obj);
            var shHtml = '<div class="layui-tab layui-tab-brief" style="width: 900px;height: 610px;padding: 0px 10px"  lay-filter=""><input type="hidden" id="wzid" value="'+id+'">\n' +
                '  <ul class="layui-tab-title">\n' +
                '    <li class="layui-this">图片</li>\n' +
                '    <li>视频</li>\n' +
                '  </ul>\n' +
                '  <div class="layui-tab-content" style="padding-top: 15px">\n' +
                '    <div class="layui-tab-item layui-show"><img src="'+imagePath+'" onerror="javascript:this.src=\'${ctxPath}/static/resource/images/pic404.png\'" width="900px" height="500px"/></div>\n' +
                '    <div class="layui-tab-item"><video height="495" width="900" controls autoplay autobuffer loop><source src="'+videoPath+'" type="video/mp4"></source></video></div>\n' +
                '  </div><hr class="layui-bg-gray">\n';
            if (state=='未确认'){
                shHtml += '<div style="float: right">' +
                    ' <button class="pear-btn pear-btn-primary pear-btn-md" style="border-radius: unset!important;" onclick="wzqr('+id+',2,\''+createTime+'\')">\n' +
                    '                     <i class="layui-icon"></i>消警\n' +
                    '                </button>&nbsp;<button class="pear-btn pear-btn-md" style="border-radius: unset!important;" onclick="wzqr('+id+',1,\''+createTime+'\')">\n' +
                    '                     <i class="layui-icon"></i>确认\n' +
                    '                </button>'+
                    '</div></div>';
            }else{
                shHtml += '<div style="float: right">' +
                    ' <button class="pear-btn pear-btn-primary pear-btn-md" disabled style="background: #E6E6E6!important;color: grey!important;border-radius: unset!important;">\n' +
                    '                     <i class="layui-icon"></i>消警\n' +
                    '                </button>&nbsp;<button class="pear-btn pear-btn-md" disabled style="background: #E6E6E6!important;color: grey!important;border-radius: unset!important;">\n' +
                    '                     <i class="layui-icon"></i>确认\n' +
                    '                </button>'+
                    '</div></div>';
            }

            layer.open({
                type: 1,
                shadeClose: true,
                scrollbar: false,
                title: "审核预览 - "+eventName+" - "+state,
                skin: 'shc',
                content: shHtml,
                cancel: function(index, layero){
                    reloadWzCount();
                }
            })
        }

        window.batchRemove=function (obj,id){
            layer.confirm('确定要删除该条记录', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: SYS_PATH + 'busOperationplan/data/wzListDelete?ids='+id,
                    dataType: 'json',
                    type: 'post',
                    success: function (result) {
                        layer.close(loading);
                        if (result.code == 0) {
                            layer.msg(result.message, {
                                icon: 1,
                                time: 1000
                            }, function () {
                                table.reload('wzgl-table');
                            });
                        } else {
                            layer.msg(result.message, {
                                icon: 2,
                                time: 1000
                            });
                        }
                    }
                })
            });
        }

        window.reloadWzCount=function (){
            table.reload('wzgl-table');
            $.ajax({
                url: SYS_PATH + "busOperationplan/data/wzCount?planid=" + planid,
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    $(".zy-select-this").find(".content-wg1").find(".wg-count").html(result.wgCount);
                    $(".zy-select-this").find(".content-wg2").find(".wg-count").html(result.dqrwgCount);
                }
            })
        }

        window.wzqr=function (id,state,sj){
            var obj=map.get("shobj");
            if (state=='1'){
                layer.open({
                    type: 2,
                    title: '人员违章扣分',
                    shade: 0.1,
                    area: [common.isModile() ? '100%' : '600px', common.isModile() ? '100%' : '450px'],
                    content: VIEW_PATH + "wzPoint?sj="+sj+"&wzid="+id+"&type=1"
                });
            }else{
                layer.confirm('确定要消警该条记录', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    $.ajax({
                        url: SYS_PATH + "busOperationplan/data/wzqr?id=" + id+"&state="+state,
                        dataType: 'json',
                        type: 'post',
                        success: function (result) {
                            if (result.code == 0) {
                                layer.msg("操作成功", {time: 500, icon: 6});
                                setTimeout(function (){
                                    layer.closeAll();
                                    reloadWzCount();
                                },1000);
                            } else {
                                layer.msg("操作失败", {time: 1000, icon: 6});
                            }
                        }
                    })
                });
            }
        }
    })

</script>
</body>
</html>